<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width = device-width, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 3.0,user-scalable = no,viewport-fit = cover">
        <script src="AAHighchartsLib.js"></script>
        <script src="AAHighchartsMore.js"></script>
        <script src="AAFunnel.js"></script>
        <script src="AAEasing.js"></script>
        <script src="AARoundedCorners.js"></script>

<!--        <script src="https://code.highcharts.com/highcharts.js"></script>-->
<!--        <script src="https://code.highcharts.com/highcharts-more.js"></script>-->
<!--        <script src="https://code.highcharts.com/modules/funnel.js"></script>-->
        <style>
            *{ -webkit-user-select: none; 
                user-select: none; }
        </style>
    </head>
    <body style="margin:0px 0px 0px 0px;">
        <div id="container" style="width:100%; height: 100%;">
        </div>
        <script>
        var aaGlobalChart;
        function loadTheHighChartView(sender, receivedWidth, receivedHeight) {
                var container = document.getElementById('container');
                if (receivedWidth != 0) {
                    container.style.width = receivedWidth;
                }
                if (receivedHeight != 0) {
                    container.style.height = receivedHeight;
                }
                
                var aaOptions = JSON.parse(sender, function (key, value) {
                  if (   typeof(value) == 'string'
                      && value.indexOf('function') != -1) {
                     return eval(value)
                  }
                   return value;
                });

                if (aaOptions.defaultOptions) {
                    Highcharts.setOptions({
                        lang: aaOptions.defaultOptions
                    });
                }

                if (aaOptions.plotOptions) {
                    configurePlotOptions(aaOptions);
                }
                                
                aaGlobalChart = Highcharts.chart('container', aaOptions);
            }
        
        function configurePlotOptions(aaOptions) {
            var aaPlotOptions = aaOptions.plotOptions;
            if (aaPlotOptions.series && aaPlotOptions.series.animation) {
                var animation = aaPlotOptions.series.animation;
                var animationEasingType = animation.easing;
                animation.easing = configureTheChartAnimationEasingType(animationEasingType);
            }
            
            if (aaOptions.touchEventEnabled == true && aaPlotOptions.series) {
                configureChartTouchEvent(aaPlotOptions);
            }
        }
        
        function configureChartTouchEvent(aaPlotOptions) {
            var mouseOverFunc = function() {
                var message = {
                    name: this.series.name,
                    y: this.y,
                    x: this.x,
                    category:this.category,
                    offset: {plotX: this.plotX, plotY: this.plotY},
                    index: this.index,
                };
            window.webkit.messageHandlers.mouseover.postMessage(message);
            };
            
            if (aaPlotOptions.series.point) {// set property directlly for series point
                aaPlotOptions.series.point.events.mouseOver = mouseOverFunc;
            } else {// creat a new series point object instance
                var seriesPoint = {
                    events:{
                        mouseOver: mouseOverFunc,
                    }
                };
                aaPlotOptions.series.point = seriesPoint;
            }
        }

        function onlyRefreshTheChartDataWithSeries(receivedSeries, animation) {
            var receivedSeriesArr = JSON.parse(receivedSeries);
            var seriesArrLength = receivedSeriesArr.length;
            for (var i = 0; i < seriesArrLength; i++) {
                var receivedSeriesElementData = receivedSeriesArr[i].data;
                var seriesElement = aaGlobalChart.series[i];
                seriesElement.setData(receivedSeriesElementData, false);
            }
            
            var animationBool = (animation == "1") ? true:false;
            aaGlobalChart.redraw(animationBool);
        }
        
        function updateChart(optionsStr, redraw) {
            var options = JSON.parse(optionsStr);
            aaGlobalChart.update(options,redraw);
        }
        
        function addPointToChartSeries(elementIndex, optionsStr, redraw, shift, animation) {
            var options = JSON.parse(optionsStr);
            var redrawBool = (redraw == "1") ? true:false;
            var shiftBool = (shift == "1") ? true:false;
            var animationBool = (animation == "1") ? true:false;
            
            var seriesElement = aaGlobalChart.series[elementIndex];
            seriesElement.addPoint(options, redrawBool, shiftBool, animationBool);
        }
        
        function redrawWithAnimation(animation) {
            var animationBool = (animation == "1") ? true:false;
            aaGlobalChart.redraw(animationBool);
        }
        
        function setTheChartViewContentWidth(receivedWidth) {
            var container = document.getElementById('container');
            container.style.width = receivedWidth;
            aaGlobalChart.reflow();
        }
        
        function setTheChartViewContentHeight(receivedHeight) {
            var container = document.getElementById('container');
            container.style.height = receivedHeight;
            aaGlobalChart.reflow();
        }
        
        function setChartSeriesHidden(hidden) {
            var seriesLength = aaGlobalChart.series.length;
            for (var i = 0; i < seriesLength; i++) {
                var seriesElement = aaGlobalChart.series[i];
                if (hidden == true) {
                    seriesElement.hide();
                } else {
                    seriesElement.show();
                }
            }
        }
        
        function showTheSeriesElementContentWithIndex(elementIndex) {
            var seriesElement = aaGlobalChart.series[elementIndex];
            seriesElement.show();
        }
        
        function hideTheSeriesElementContentWithIndex(elementIndex) {
            var seriesElement = aaGlobalChart.series[elementIndex];
            seriesElement.hide();
        }
        
        function addElementToChartSeriesWithElement(elementStr) {
            var seriesElement = JSON.parse(elementStr);
            aaGlobalChart.addSeries(seriesElement);
        }
        
        function removeElementFromChartSeriesWithElementIndex(elementIndex) {
            var seriesElement = aaGlobalChart.series[elementIndex];
            if (seriesElement) {
                seriesElement.remove(true);
            }
        }
        
        function evaluateTheJavaScriptStringFunction(jsStringFunction) {
            eval(jsStringFunction);
        }
        
        function changeChartSize(receivedWidth, receivedHeight, receivedAnimation) {
            var container = document.getElementById('container');
            container.style.width = receivedWidth;
            container.style.height = receivedHeight;
            
            var aaAnimation;
            if (receivedAnimation) {
               aaAnimation = JSON.parse(receivedAnimation);
               var animationEasingType = aaAnimation.easing;
               aaAnimation.easing = configureTheChartAnimationEasingType(animationEasingType);
            }
            
            aaGlobalChart.setSize(receivedWidth, receivedHeight, aaAnimation);
        }
        
            </script>
    </body>
</html>
